<template>
  <div>
    <el-container>
      <el-header height="180px">
        <div style="margin: 0 auto;width: 1200px">
<!--          <span class="span_header1">御兽阁宠物商城</span>-->
          <img id="logo" src="../../public/images/logo/pet_logo.png">
<!-- 搜索栏 -->
          <el-input v-model="keyword" placeholder="搜索" style="width: 500px;position: relative;bottom: 70px;left: 200px;">
            <el-button round slot="append" icon="el-icon-search" @click="findKeyWords()"></el-button>
          </el-input>
          <span style="position: relative;left: 300px;bottom: 70px;width: 300px;">
            <span>
          <!--登录注册-->
          <span class="login">
            <el-button type="text" @click="redirectToLogin" :disabled="!isButtonClicked">
              <div style="position:relative;right: 28px;bottom: -2px;color: #FF7F50;">LOGIN/REGISTER</div>
            </el-button>
          </span>
              <!--              <span class="welcome">欢迎回来，root！</span>-->
              <el-dropdown :disabled="isButtonDisabled" style="position:relative;right: 180px;bottom: -10px;">
                <el-avatar src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                           size="small"></el-avatar>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="el-icon-plus"><a href="/userupdate" @click="swapUserUpdate()">修改资料</a></el-dropdown-item>
                  <el-dropdown-item icon="el-icon-circle-plus"><a href="/userupdate" @click="swapUserUpdate()">修改头像</a></el-dropdown-item>
                  <el-dropdown-item icon="el-icon-circle-plus-outline"><a href="/userupdate" @click="swapUserUpdate()">修改密码</a></el-dropdown-item>
                  <el-dropdown-item icon="el-icon-check" divided @click="removeSaveUserId()"><a href="/">退出登录</a></el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
            <!--            购物车跳转-->

            <el-link style="position:relative;right: 40px;text-decoration: none;color: #FF7F50;"
                     @click="$router.push('/sys-user/product/cart')">
              <i class="el-icon-shopping-bag-1">购物车</i>
            </el-link>
            <!--            <button @click="$router.push('/sys-user/product/cart')">tiao</button>-->
          </span>

          <el-menu router style="position: relative;bottom: 30px" mode="horizontal"
                   text-color="black" active-text-color="#778899">
            <el-menu-item index="/product/index">首页</el-menu-item>
            <el-menu-item index="/sys-user/product/new_client">新人活动</el-menu-item>
            <el-menu-item index="/sys-user/product/brand">品牌馆</el-menu-item>
            <el-menu-item index="/sys-user/pet/pet-management">宠物领养专区</el-menu-item>
            <el-menu-item index="/sys-user/product/comment">留言专区</el-menu-item>
          </el-menu>
        </div>
      </el-header>

      <router-view/>


      <el-footer class="footer-container" style="height: 200px;background-color: black">
        <div class="footer-content" style="width: 1200px;margin: 0 auto">
          <div style="float: left;margin-right: 100px;margin-top:30px; color: white">
            <img src="../../public/images/logo/pet_logo.png" width="100px">
            <p>广东佛山御兽阁网络科技</p>
          </div>
          <div class="div_foot" style="float: left;margin-right: 100px;margin-top: 40px">
            <ul>
              <li><a class="a_top" href="/sys-user/footers/gettingStarted">新手上路</a></li>
              <li><a href="/sys-user/footers/gettingStarted">购买流程</a></li>
              <li><a href="/sys-user/footers/gettingStarted">现金账户</a></li>
              <li><a href="/sys-user/footers/gettingStarted">订单查询</a></li>
              <li><a href="/sys-user/footers/gettingStarted">服务协议</a></li>
            </ul>
            <div style="display: flex;height: 157px;align-items: center;margin-left: 40px;" >
              <el-divider direction="vertical"></el-divider>
            </div>
            <ul>
              <li><a class="a_top" href="/sys-user/footers/purchaseMethods">购买方式</a></li>
              <li><a href="/sys-user/footers/purchaseMethods">余额支付</a></li>
              <li><a href="/sys-user/footers/purchaseMethods">网上方式</a></li>
              <li><a href="/sys-user/footers/purchaseMethods">银行方式</a></li>
              <li><a href="/sys-user/footers/purchaseMethods">货到付款</a></li>
            </ul>
            <div style="display: flex;height: 157px;align-items: center;margin-left: 40px;" >
              <el-divider direction="vertical"></el-divider>
            </div>
            <ul>
              <li><a class="a_top" href="/sys-user/footers/afterSalesService">售后服务</a></li>
              <li><a href="/sys-user/footers/afterSalesService">如何退换货</a></li>
              <li><a href="/sys-user/footers/afterSalesService">如何退换货</a></li>
              <li><a href="/sys-user/footers/afterSalesService">退换货流程</a></li>
              <li><a href="/sys-user/footers/afterSalesService">客服电话</a></li>
            </ul>
            <div style="display: flex;height: 157px;align-items: center;margin-left: 40px;" >
              <el-divider direction="vertical"></el-divider>
            </div>
            <ul>
              <li><a class="a_top" href="/sys-user/footers/questions">常见问题</a></li>
              <li><a href="/sys-user/footers/questions">注册登录</a></li>
              <li><a href="/sys-user/footers/questions">热点问题</a></li>
              <li><a href="/sys-user/footers/questions">配送方式</a></li>
              <li><a href="/sys-user/footers/questions">收费标准</a></li>
            </ul>
            <div style="display: flex;height: 157px;align-items: center;margin-left: 40px;" >
              <el-divider direction="vertical"></el-divider>
            </div>
            <ul>
              <li><a class="a_top" href="/sys-user/footers/help">帮助</a></li>
              <li><a href="/sys-user/footers/help">联系我们 </a></li>
              <li><a href="/sys-user/footers/help">御兽阁下载</a></li>
              <li><a href="/sys-user/footers/help">pet豆</a></li>

            </ul>
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isButtonClicked: true, // 初始状态为未点击
      isButtonDisabled: true, // 初始状态为按钮可用
      keyword:'',
    };
  },
  methods: {
    removeSaveUserId(){
      localStorage.removeItem('userId');
    },
    findKeyWords(){
      localStorage.setItem('keyword', this.keyword);
      this.$router.push('/sys-user/product/searchQuery');
    },
    redirectToLogin() {
      // 处理登录/注册跳转的逻辑
      this.isButtonClicked = false; // 点击后禁止按钮
/*      this.isButtonDisabled = true;*/
      this.$router.push('/sys-user/product/login');
      this.isButtonDisabled = false;

    },
  },
};
</script>

<style>
.footer-container {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 200px;
  background-color: black;
  color: white;
}

.footer-content {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 其他样式... */

.span_header1{
  font-family: "FZYaoTi", cursive;
  font-size: 3em;
  font-weight: bold;
  color: #B22222;
  color: rgba(139,0,0,0.6);
  border: none;
  border-radius: 5px;
  padding-bottom: 20px;
  line-height: 150px;
  text-align: center;
  position: fixed;
  top: 0;
  left: 320px;

}
ul {
  text-align: left;

}

ul, ol {
  list-style: none;
}
.el-divider--vertical{
  height: 100px!important;
}
.div_foot {
  display: flex;
  align-items: flex-start;;
}

.div_foot span {
  display: inline-block;
  white-space: pre;
  margin-right: 50px;

}

.div_foot a {
  display: block;
}

a {
  text-decoration: none;
  color: #FF7F50;
}

.a_top {
  font-weight: bold;
  text-align: left;
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
}

.el-header {
  height: 200px;
  background-image: url(../../public/images/page_head_foot/writeTiger01.jpg);
}
.el-header >div >img{
  width: 100px;
  height: 100px;
  position: relative;
  left: 150px;
  margin: 20px;
}

.el-footer {
  height: 200px;
  background-image: url(../../public/images/page_head_foot/writeTiger02.jpg);
  background-color: #00213d;
  position: relative;
  text-align: center;
  line-height: 25px;
  padding: 40px;
}

</style>

